<template>
	
	<view class="asset">
		<view class="head" style="z-index: 999;">
			<view class="head_text" @click="black()">返回</view>
			<image src="../../../static/public/img/fh.png"
				style="width: 18px;height: 18px;position: absolute;top:33px;left: 15px;"></image>
				<view class="ss">取款</view>
			<view style="width: 18%;height: 25px;position: absolute;top:30px;right:5px;font-size: 14px;"  @click="gowithdrawRecord()">取款记录</view>	
		</view>
	
		<view style="width:100%;background: #1a1a1c;color: #818181;font-size: 12px;height: 50px;line-height: 50px;">
			<text style="margin-left:3%;">账户余额</text>
			<text style="margin-left:65%;">{{data.money}}</text>
		</view>
		
		<view style="width:100%;background: #1a1a1c;color: #818181;font-size: 12px;height: 40px;line-height: 40px;margin-top: 3%;">
			<text style="margin-left:3%;">消费比例</text>
		</view>
		<view style="width:100%;background: #1a1a1c;color: #818181;font-size: 12px;height: 40px;line-height: 40px;">
			<text style="margin-left:3%;">取款需达投资量：{{data.withdraw_tx}}</text>
			<text style="margin-left:10%;">已达投资量：{{data.user_withdraw_tx}}</text>
		</view>
		<view style="width:100%;background: #1a1a1c;color: #818181;font-size: 12px;height: 40px;line-height: 40px;">
			<text style="margin-left:3%;">是否可以取款：<text v-if="data.is_withdraw == 1">是</text> <text v-if="data.is_withdraw == 0">否</text></text>
			<text style="margin-left:17%;">最小取款金额：{{data.withdraw_min}}元</text>
		</view>
		<view style="width:100%;background: 000;color: #818181;font-size: 12px;height: 40px;line-height: 40px;text-align: center;">
			<text>每日可取款<text style="color:red;">{{data.withdraw_num}}</text>次,今日尚可取款<text style="color:red;">{{data.user_withdraw_num}}</text>次</text>
		</view>
		<view style="width:100%;background: #1a1a1c;color: #818181;font-size: 12px;height: 50px;line-height: 50px;">
			<text style="margin-left:3%;float: left;">取款金额：</text>
			<input type="number" placeholder="输入金额" style="width: 20%;float: left;height: 50px;font-size: 12px;margin-left: 3%;" v-model="qumoney" />
		</view>
		<view style="width:100%;background: #1a1a1c;color: #818181;font-size: 12px;height: 40px;line-height: 40px;margin-top: 3%;" @click="dk">
			<text style="margin-left:3%;">选择取款账户：</text>
			
			<image v-if="username == null || username == ''" src="../../../static/public/img/zk.png" style="width: 10px;height: 10px;margin-left: 10%;"></image>
			<text style="margin-left: 4%;">{{username}}</text>
		</view>
		
		<view v-if="ispassword" style="color: #818181;font-size: 12px;margin-top: 5%;background: white;height: 95rpx">
		  取款密码：<view class="password-input-com" ref="passwordInputCom">
        <input
            ref="passwordInput"
            v-model="inputValue"
            :focus="inputFocus"
            :style="{left: passwordInputLeft + 'px'}"
            type="text"
            maxlength="2"
            @input="onInput"
            @blur="onBlur"
            class="password-input">
        <view class="virtual-input-list" ref="virtualInputList">
            <view class="virtual-input-item"
                v-for="(item, index) in virtualInputs"
                :key="index"
                :class="{security: mask, 'input-focus': virtualInputItemIndex == index}"
                @click="onVirtualInputClick(index)">
                <view v-if="!mask" class="text-viewer">{{item.value}}</view>
                <view v-show="item.value != ' ' && mask" class="security-mask"></view>
                <view class="virtual-input-cursor"></view>
            </view>
        </view>
    </view>
		</view>

         <button style="font-size: 14px;width:30%;color: #1c1c1e;float: left;margin-left: 5%;margin-top: 5%;height: 45px;line-height: 45px;">联系客服</button>
		 <button style="font-size: 14px;width:55%;background-image: linear-gradient(180deg,#e6b87a,#d49a53 80%);color: #1c1c1e;float: left;margin-left: 5%;margin-top: 5%;height: 45px;line-height: 45px;" @click="button()">确认取款</button> 
			
	   <action-sheet ref="actionSheet" :actions='actions' cancel-text="取消" description=""  @open="open" @close="close" @select="select"></action-sheet>

	</view> 
</template>

<script>
	import actionSheet from '../../../components/action-sheet/index.vue'
	import jpPwd from '../../../components/jp-pwd/jp-pwd.vue';
	export default {
	  components: {
			actionSheet
		},
		name: "PasswordInput",
		props: {
			value: {
				type: String,
				default: ''
			},
			length: { // 密码最大长度
				type: Number,
				default: 6
			},
			mask: {
				type: Boolean,
				default: false
			}
		},

		        watch: {
		            value: {
		                immediate: true,
		                handler(newVal){
		                    this.calcVirtualInputs(newVal);    
		                }
		            }
		        },
		data() {
			
			let getPlatform = () => {
			                let platform;
			                // #ifdef H5
			                platform = 'H5';
			                // #endif
			                
			                // #ifdef MP-WEIXIN
			                platform = 'mp-weixin';
			                // #endif
			                
			                // #ifdef MP-ALIPAY
			                platform = 'mp-alipay';
			                // #endif
			                
			                return platform;
			            }
			
			return {
			   actions: [
				{
					  name: '连新任 ***************2441',
					  color: 'black',
					focus: false,
					password: ''
				  },
			  ],
			  ispassword:false,
			  data:[],
			  
			  platform: getPlatform(),
			  virtualInputs: [],
			  // specialStr: '●', // 特殊字符
			  // splitStr: '★', // 分割字符
			  inputValue: '',
			  inputFocus: false,
			  passwordInputLeft: 1,
			  virtualInputItemIndex: -1,
			  username:'',
			  bankInfo:'',
			  passwordInputComRect: {
			      width: 0,
			      height: 0,
			      left: 0,
			      right: 0
			  },
			  virtualInputItemRect: {
			      width: 0,
			      height: 0,
			      left: 0,
			      right: 0
			  },
			  qumoney:''
			}
		},
		methods: {
			
		// 计算需要输入框的个数
			calcVirtualInputs(newVal){
					let valueArr = ((newVal + '').length > 0 ? (newVal + '') : '●●●●●●●●●●●●●●●●●●●●●●●●').split('');
					let length = this.length;
					// console.log('valueArr', valueArr)
					if(valueArr.length > length){
						valueArr.splice(length);
					}else if(valueArr.length < length){
						let lengthDiff = length - valueArr.length;
						while(lengthDiff > 0){
							valueArr.push('●');
							lengthDiff--;
						}
					}
					let virtualInputs = valueArr.map((str, index) => {
						return {
							value: str == '●' ? ' ' : str,
							focus: false,
							index: index
						};
					});
					this.virtualInputs = virtualInputs
				},
				
				
				onInput(evt){
					// console.log(evt)
					let val = evt.detail.value;
					let virtualInputItemIndex = this.virtualInputItemIndex;
					// console.log('onInput', val);
					
					if(val.length == 2){ // 当前虚拟输入框输入值后立即向后一个输入框移动
						this.virtualInputs[virtualInputItemIndex].value = val.charAt(1);
						if((virtualInputItemIndex + 1) < this.length){
							this.virtualInputItemIndex = virtualInputItemIndex + 1;
							this.inputMoveTo(this.virtualInputItemIndex, () => {
								let nextVirtualInputVal = this.virtualInputs[this.virtualInputItemIndex].value;
								// console.log('nextVirtualInputVal', nextVirtualInputVal)
								// 这里需要延迟60毫秒再设置下一个虚拟输入框的值，不然无效
								let timer = setTimeout(() => {
									clearTimeout(timer);
									this.inputValue = nextVirtualInputVal == ' ' ? nextVirtualInputVal : (' ' + nextVirtualInputVal);
									// console.log('this.inputValue', this.inputValue)
								}, 60);
								
							});
						}
						this.$nextTick(() => {
							this.detectInputComplete();
						});    
						
					} else if(val.length == 1){
						// console.log('length等于1', val)
						if(val == ' '){ // 当前操作为删除虚拟框中的值
							this.virtualInputs[virtualInputItemIndex].value = ' ';
						}else{ // 当前操作为正在输入
							if((virtualInputItemIndex + 1) < this.length){
								this.virtualInputItemIndex = virtualInputItemIndex + 1;
								this.inputMoveTo(this.virtualInputItemIndex, () => {
									let nextVirtualInputVal = this.virtualInputs[this.virtualInputItemIndex].value;
									let timer = setTimeout(() => {
										clearTimeout(timer);
										this.inputValue = nextVirtualInputVal == ' ' ? nextVirtualInputVal : (' ' + nextVirtualInputVal);
										// console.log('this.inputValue2', this.inputValue)
									}, 60);
								});
							}
							this.$nextTick(() => {
								this.detectInputComplete();
							});    
						}                    
					} else if(val.length == 0){ // 往前一个输入框移动，并删除其值
						if(virtualInputItemIndex - 1 >= 0){
							this.virtualInputItemIndex = virtualInputItemIndex - 1;
							this.inputMoveTo(this.virtualInputItemIndex, () => {
								this.virtualInputs[this.virtualInputItemIndex].value = ' ';
								// 这里需要延迟60毫秒再设置下一个虚拟输入框的值，不然无效
								let timer = setTimeout(() => {
									clearTimeout(timer);
									this.inputValue = ' ';
								}, 60);
							});
						}
					}        
				},
				onInput(evt){
					// console.log(evt)
					let val = evt.detail.value;
					let virtualInputItemIndex = this.virtualInputItemIndex;
					// console.log('onInput', val);
					
					if(val.length == 2){ // 当前虚拟输入框输入值后立即向后一个输入框移动
						this.virtualInputs[virtualInputItemIndex].value = val.charAt(1);
						if((virtualInputItemIndex + 1) < this.length){
							this.virtualInputItemIndex = virtualInputItemIndex + 1;
							this.inputMoveTo(this.virtualInputItemIndex, () => {
								let nextVirtualInputVal = this.virtualInputs[this.virtualInputItemIndex].value;
								// console.log('nextVirtualInputVal', nextVirtualInputVal)
								// 这里需要延迟60毫秒再设置下一个虚拟输入框的值，不然无效
								let timer = setTimeout(() => {
									clearTimeout(timer);
									this.inputValue = nextVirtualInputVal == ' ' ? nextVirtualInputVal : (' ' + nextVirtualInputVal);
									// console.log('this.inputValue', this.inputValue)
								}, 60);
								
							});
						}
						this.$nextTick(() => {
							this.detectInputComplete();
						});    
						
					} else if(val.length == 1){
						// console.log('length等于1', val)
						if(val == ' '){ // 当前操作为删除虚拟框中的值
							this.virtualInputs[virtualInputItemIndex].value = ' ';
						}else{ // 当前操作为正在输入
							if((virtualInputItemIndex + 1) < this.length){
								this.virtualInputItemIndex = virtualInputItemIndex + 1;
								this.inputMoveTo(this.virtualInputItemIndex, () => {
									let nextVirtualInputVal = this.virtualInputs[this.virtualInputItemIndex].value;
									let timer = setTimeout(() => {
										clearTimeout(timer);
										this.inputValue = nextVirtualInputVal == ' ' ? nextVirtualInputVal : (' ' + nextVirtualInputVal);
										// console.log('this.inputValue2', this.inputValue)
									}, 60);
								});
							}
							this.$nextTick(() => {
								this.detectInputComplete();
							});    
						}                    
					} else if(val.length == 0){ // 往前一个输入框移动，并删除其值
						if(virtualInputItemIndex - 1 >= 0){
							this.virtualInputItemIndex = virtualInputItemIndex - 1;
							this.inputMoveTo(this.virtualInputItemIndex, () => {
								this.virtualInputs[this.virtualInputItemIndex].value = ' ';
								// 这里需要延迟60毫秒再设置下一个虚拟输入框的值，不然无效
								let timer = setTimeout(() => {
									clearTimeout(timer);
									this.inputValue = ' ';
								}, 60);
							});
						}
					}        
				},
				onBlur(){
					this.inputFocus = false;
					this.virtualInputItemIndex = -1;
				},
				detectInputComplete(){
					let length = this.length;
					let valStr = this.getValue();
					// console.log('detectInputComplete', valStr);
					if(length == valStr.length){
						this.$emit('complete', valStr);
					}
				},
				inputMoveTo(virtualInputIndex, cb){
					// console.log('inputMoveTo', virtualInputIndex)
					let passwordInputComRect = this.passwordInputComRect;
					let obj = uni.createSelectorQuery().in(this).selectAll('.virtual-input-item');
					// 获取元素宽高
					obj.boundingClientRect((rectData) => {
						// console.log(rectData)    
						let currentDomRect = rectData[virtualInputIndex];
						// console.log('currentDomRect', currentDomRect, virtualInputIndex, passwordInputComRect)
						// +1是因为有1px的左边框
						this.passwordInputLeft = currentDomRect.left - passwordInputComRect.left + 1;
						
						typeof cb == 'function' ? cb() : 1;
					}).exec();
				},
				 onVirtualInputClick(index){
					// console.log('onVirtualInputClick', index)
					let $passwordInput = this.$refs.passwordInput;
					
					this.inputMoveTo(index, () => {
						let virtualInputVal = this.virtualInputs[index].value;
						this.inputFocus = true;
						this.inputValue = virtualInputVal == ' ' ? virtualInputVal : (' ' + virtualInputVal);
						this.virtualInputItemIndex = index;
						if(this.platform == 'H5'){
							this.$refs.passwordInput.$el.focus();
						}
					});
				},
				 getValue(){
						let length = this.length;
						let valStr = this.virtualInputs.reduce((res, item) => {
							let itemVal = item.value.replace(/ /g, '');
							return res += itemVal;
						}, '');
						if(valStr.length > length){
							valStr = valStr.substr(0, length);
						}
						return valStr;
					},
				 mounted() {
					this.$nextTick(() => {
						let obj = uni.createSelectorQuery().in(this).select('.password-input-com');
						// 获取元素宽高
						obj.boundingClientRect((data) => {
							if(!data){ // 支付宝小程序获取不到位置信息
								let systemInfo = uni.getSystemInfoSync();
								let wh = systemInfo.windowWidth;
								let rpxCalcIncludeWidth = 750;
								let pagePaddingLeft = 48;
								data = {
									left: wh / 750 * 48
								}
							}else{
								this.passwordInputComRect = data;
							}
							// console.log('组件宽高位置信息', data)    
						}).exec();
					});            
				},
				 forget() {
					  console.log('忘记密码')
				  },
			    handle(pwd){
			        console.log(pwd)//pwd就是密码
			   },
			   open() {
					console.log('动作面板打开');
				},
				close() {
					console.log('动作面板关闭');
				},
			  dk(){
				  this.$refs.actionSheet.open();
			  },
			   gowithdrawRecord(){
			   	uni.navigateTo({
			   		url:'/pages/components/withdrawRecord/withdrawRecord'
			   	})
			   },
			   black(){
				   uni.navigateBack()
			   },
			   gobetDetail(){
				   uni.navigateTo({
				   	url:'/pages/components/betDetail/betDetail'
				   })
			   },
			    open() {
					
			   },
			   close() {
				   
			   },
			   select(item,index) {
					console.log(item);
					this.username = item.username
					this.bankInfo = item
					//弹出密码输入框
					this.ispassword=true;
			   },
			   
			   button(){
				   
				   if(this.data.is_withdraw == 0)
				   {
					   return this.$api.msg("未达到取款条件");
				   }
				   if(this.qumoney == 0 || this.qumoney == undefined || this.qumoney == '' || !this.qumoney)
				   {
				   		return this.$api.msg("请输入取款金额");
				   }
				   if(this.getValue().length != 6)
				   {
					   return this.$api.msg("请输入完整的取款密码");
				   }
				   if(this.qumoney == 0 || this.qumoney == undefined || this.qumoney == '' || !this.qumoney)
				   {
					   return this.$api.msg("请输入取款金额");
				   }
				   
				   
				   let data = {
					   money:this.qumoney,
					   bank_id:this.bankInfo.id,
					   username:this.bankInfo.username,
					   bank_number:this.bankInfo.bank_number,
					   bank_open:this.bankInfo.bank_open,
					   pay_pwd:this.getValue()
				   };
				   
				   this.$api.request('/api/withdraw',data).then((res)=>{
					   if(res.code != 200){
					   		return this.$api.msg(res.message);
					   }
					   if(res.code == 200)
					   {
						   uni.showModal({
							title: '提示',
							content: '申请取款成功，等待审核',
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									// console.log('用户点击确定');
									this.home()
								}
							}
						   });
					   }
				   })
				   
				   
			   },
			   
			   home(){
				   this.$api.request('/api/withdraw_setting').then((res)=>{
					   // console.log(res.data.bank)
					   this.data = res.data
					   this.actions = res.data.bank
					   
					   if(res.data.is_pwd == 0)
					   {
						   return uni.showModal({
						   	title: '提示',
						   	content: '请先设置交易密码',
							showCancel:false,
						   	success: function (res) {
						   		if (res.confirm) {
						   			console.log('用户点击确定');
									uni.navigateTo({
										url:'pages/components/resetPassword/resetPasswords'
									})
						   		}
						   	}
						   });
					   }
					   if(res.data.bank.length == 0)
					   {
						   return uni.showModal({
							title: '提示',
							content: '请先设置您的取款银行卡',
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.navigateTo({
										url:'pages/components/resetPassword/resetPasswordsb'
									})
								}
							}
						   });
					   }
					   
					   
				   })
			   },

		},
		onShow() { 
			this.home()
		},
		onLoad() {
			this.home()
			// this.$jpPwds.toOpen()
		}

	}
</script>

<style lang="scss">
	
	
	page {
		background-color: #000;
	}

	.asset {
	   .head {
	   	background: #151516 !important;
	   	color: #fff;
	   	height: 130rpx;
	   	font-size: 18px;
	   }
	   
	   .head_text {
		 font-size: 14px;
         margin-left: 9%;
	   	 line-height: 160rpx;
	   }
	   .item{
		   width: 100%;
		   float: left;
		   margin-top: 5%;
		   border-bottom: 1px solid #ddd;
		   padding-bottom: 3%;
	   }
	   .sx{
		   width:25%;
		   height: 30px;
		   border:1px solid #d7d7d7;
		   text-align: center;
		   border-radius: 5px;
		   line-height: 30px;
		   background: #fff;
		   margin-left: 5%;
		   float: left;
		   margin-top:3%;
	   }
	   .sxs{
	   		   width:25%;
	   		   height: 30px;
	   		   border:1px solid #cd0006;
	   		   text-align: center;
	   		   border-radius: 5px;
	   		   line-height: 30px;
	   		   background: #fff;
	   		   margin-left: 5%;
	   		   float: left;
	   		   margin-top:3%;
			   color:#cd0006;
			   background: url(../../../static/public/img/xz.png) no-repeat 50% 50%;
			   background-size: 30px;
			   background-position-x: 71px;
			   background-position-y: 5px;
	   }
	   .ss {
	   		 text-align: center;
	   		 line-height: 160rpx;
	   		 position: absolute;
	   		 top: 0px;
	   		 left: 46%;
	   }

	}
	    .password-input-com {
	        position: relative;
	    }
	
	    .password-input {
	        position: absolute;
	        top: 2rpx;
	        left: 2rpx;
	        width: 70rpx;
	        height: 100%;
	        line-height: 1.5;
	        /* color: rgba(255,255,255,0.8); */
	        color: transparent;
	        font-size: 48rpx;
	        text-align: center;
	        /* background-color: #f60; */
	    }
	
	    .virtual-input-list {
	        position: relative;
	        z-index: 2;
	        display: flex;
	        justify-content: space-between;
	        width: 80%;
	        height: 70rpx;
	        opacity: 0.7;
			margin-left: 17%;
			margin-top: -2%;
			
	
	        .virtual-input-item {
	            position: relative;
	            width: 70rpx;
	            height: 100%;
	            border: 2rpx solid #90949D;
	            transition: border-color .3s;
	
	            .text-viewer {
	                height: 100%;
	                line-height: 1.5;
	                text-align: center;
	                color: #202328;
	                font-size: 48rpx;
	            }
	
	            .security-mask {
	                position: absolute;
	                top: 50%;
	                left: 50%;
	                width: 24rpx;
	                height: 24rpx;
	                z-index: 4;
	                border-radius: 50%;
	                margin: -12rpx 0 0 -12rpx;
	                background-color: #202328;
	            }
	
	            .virtual-input-cursor {
	                display: none;
	                position: absolute;
	                top: 10%;
	                left: 50%;
	                height: 80%;
	                z-index: 6;
	                width: 3rpx;
	                background-color: #202328;
	                animation: 0.6s virtual-input-cursor infinite;
	            }
	
	            &.input-focus {
	                border-color: #387EE8;
	
	                .virtual-input-cursor {
	                    display: block;
	                }
	            }
	        }
	    }
	
	    @keyframes virtual-input-cursor {
	        0% {
	            opacity: 0;
	        }
	
	        50% {
	            opacity: 1;
	        }
	
	        100% {
	            opacity: 0;
	        }
	    }
</style>
